Vue.component("login",{
    props:["openLogin","openRegister","prefix"],
    template:`
    <span>
        <slot v-if="myinfo" name="logined" v-bind:myinfo="myinfo"></slot>
        <slot v-else name="nologin"></slot>
        <el-dialog title="登录窗口" :visible.sync="openLogin" :modal-append-to-body="false"
            @close="closeLogin">
          <el-form :model="form">
            <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.pwd" autocomplete="off" type="password"></el-input>
            </el-form-item>
            <el-form-item label="验证码" :label-width="formLabelWidth">
              <vcode url="/user/login" type="image"></vcode>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="openLogin = false; $emit('update:openLogin', false)">取 消</el-button>
            <el-button type="primary" @click="login">登 录</el-button>
          </div>
        </el-dialog>
        <el-dialog title="注册窗口" :visible.sync="openRegister" :modal-append-to-body="false"
            @close="closeRegister">
          <el-form :model="form">
            <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="form.email" autocomplete="off" type="email"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.pwd" autocomplete="off" type="password"></el-input>
            </el-form-item>
            <el-form-item label="验证码" :label-width="formLabelWidth">
              <vcode url="/user/register" type="email" :email="form.email" msg="registerMsg"></vcode>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="openRegister = false; $emit('update:openRegister', false)">取 消</el-button>
            <el-button type="primary" @click="register">注 册</el-button>
          </div>
        </el-dialog>
    </span>
    `,
    data(){
        return {
            myinfo: null,
            formLabelWidth: 100,
            form:{name:"",pwd:""}
        }
    },
    created(){
        this.prefix = this.prefix || "";
        axios.get(this.prefix+"/user/myinfo").then(res=>{
            if(res.data.code){
                this.myinfo = res.data.data;
            } else {
                this.myinfo = null;
            }
        })
    },
    methods:{
        login(){
            let p = new URLSearchParams();
            p.append("name",this.form.name);
            p.append("pwd",this.form.pwd);
            axios.post(this.prefix+"/user/login", p).then(res=>{
                if(res.data.code){
                    this.$message(res.data.msg);
                    this.myinfo = res.data.data;
                    this.openLogin = false;
                    // 这里漏掉了一个 this.
                    this.$emit('update:openLogin', false);
                } else {
                    this.$alert(res.data.msg);
                    this.myinfo = null;
                }
            })
        },
        register(){
            let p = new URLSearchParams();
            p.append("name",this.form.name);
            p.append("pwd",this.form.pwd);
            p.append("email",this.form.email);
            axios.post(this.prefix+"/user/register", p).then(res=>{
                if(res.data.code){
                    this.$message(res.data.msg);
                    this.myinfo = res.data.data;
                    this.openRegister = false;
                    // 这里漏掉了一个 this.
                    this.$emit('update:openRegister', false);
                } else {
                    this.$alert(res.data.msg);
                    this.myinfo = null;
                }
            })
        },
        closeLogin(){
            this.openLogin = false;
            this.$emit('update:openLogin', false);
        },
        closeRegister(){
            this.openRegister = false;
            this.$emit('update:openRegister', false);
        },
        logout(){
            axios.get(this.prefix+"/user/logout").then(res=>{
                if(res.data.code){
                    this.$message(res.data.msg);
                    this.myinfo = null;
                } else {
                    this.$alert("退出失败!");
                }
            })
        }
    }

})